<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <input type="button" value="msg 修改" @click="msg=Math.random()">
        <input type="button" value="随机修改msg" @click="setMsg()">
        <br>
        <label>
            <input type="checkbox" v-model="flag">是否开启日志
        </label>
        <br>
        <ul>
            <li v-for="item in arr" :key="item.id">
                {{ item }}
            </li>
        </ul>
        <hr>
        <p>info:{{ info }}</p>
        <input v-model="info" type="text" />
        <input type="button" value="info 修改" @click="info=Math.random()">
        <input type="button" value="随机修改info" @click="setInfo()">
        <br>
        <label>
            <!-- v-model 出现不代表不能在定义事件，事件定义同样不会影响v-model的功能 -->
            <!-- <input type="checkbox" v-model="flag1" @change="changeLogState()">是否开启日志 -->
            <input type="checkbox" v-model="flag1">是否开启日志

        </label>
        <br>
        <ul>
            <li v-for="item in arr1" :key="item.id">
                {{ item }}
            </li>
        </ul>
    </div>
    <script type="module">
        /*
            vue语法环境中以 $ 方式开头定义的方法，被叫做实例方法或者实例属性(就是一个对象中的属性方法)
                + vue中$开头的方法或属性表示非常规方式增加与vue实例对象上的方法或属性 【常规方式:通过配置方式增加的】
                + $ 描述实例方法或属性的目的，是为了在相同调用语法下，开发者能够准确区分那些是当前实例构建时定义的数据
        */
        /*
            vue 提供 $watch 实例方法，用于定义可控监视器（独立定义监视器）
                + 通过任何方式获取的vue实例都可以通过该方法完成变量监控定义
                + unwatch = vm.$watch(key,handler,options)
                    - key: 被监控的变量名|对象属性路径|方法,
                    - handler: 触发是的回调函数
                    - options: 扩展配置
                    - 返回值 unwatch 是一个回调方法，执行该方法时可以完成对于的监视器的删除关闭操作
        */
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        let vm = createApp({
            data() {
                return {
                    msg: "msg",
                    arr: [],
                    flag:true,
                    // ----------
                    info:"info",
                    arr1:[],
                    flag1:true
                }
            },
            watch: {
                msg:function(nv,ov){
                    if(this.flag){
                        this.arr.push( new Date().toLocaleString() + ` [${nv}] [${ov}] ` )
                    }else{
                        console.log("日志未开启")
                    }
                },
                flag1:{
                    handler(nv){
                        if(nv){
                            // 以非响应式数据的方式，在vue实例存储一个运行时需要的中转共享变量
                            this.$infoUnwatch = this.$watch("info",(nv,ov)=>{
                                console.log("info被修改")
                                this.arr1.push( new Date().toLocaleString() + ` [${nv}] [${ov}] ` )
                            })
                        }else{
                            this.$infoUnwatch();
                        }
                    },
                    immediate:true
                }
            },
            methods: {
                setMsg() {
                    let num = Math.random();
                    if (num > 0.5) {
                        this.msg = Math.random();
                    }
                },
                setInfo() {
                    let num = Math.random();
                    if (num > 0.5) {
                        this.info = Math.random();
                    }
                },
                // changeLogState(){
                //     if(this.flag1){

                //     }else{

                //     }
                // }
            }
        }).mount("#app")
        console.log(vm)
    </script>
</body>

</html>